<template>
  <div class="login">
    <template>
      <div class="login-wrap">
        <el-form class="login-container" :model="form" :rules="rules">
          <h1 class="title">登录系统</h1>
          <el-form-item label="用户名:" prop="form">
            <el-input type="text" v-model="form.user" placeholder="登录账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="form">
            <el-input show-password v-model="form.password" placeholder="登录密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="submit()">提交</el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top:-10px">
            <el-link type="primary" @click="$router.push('/register')">用户注册</el-link>
          </el-row>
        </el-form>
      </div>
    </template>

  </div>
</template>

<script>
import axios from "axios";
import qs from 'qs';
export default {
  name:'login',
  data(){
    return {
      form:{
        user:'',
        password:''
      },
      rules:{
        user:[
          {required:true, trigger:'blur', message:'请输入用户名'}
        ],
        password: [
          {required:true, trigger:'blur', message:'请输入密码'}
        ]
      }
    }
  },
  methods:{
    //登录
    submit(){
      // let url = 'http://bcbffc4.r8.cpolar.top/employee/index/';
      let url = 'https://2b4b50b0.r2.cpolar.cn/employee/login/'
      // let params = {
      //   account : this.form.user,
      //   password: this.form.password
      //
      // }
      // axios.post(url, {
      //     params: formData
      //   }).then(r => {
      //     console.log(r)
      //   }).catch(e => {
      //
      //   })
      // console.log(this.form.user);
      // console.log(this.form.password);
      axios.post(url,qs .stringify({account: this.form.user, password: this.form.password}),
          {headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}})
      .then(resp =>{
        if(resp.data.code === 200) {
          console.log(resp.data.data);
          localStorage.setItem("token",resp.data.data)
          this.$router.push('/home')
        }else {
          this.$message.error('登录失败!')
        }
      })
      // this.$axios.post(url,{
      //   account: this.form.user,
      //   password: this.form.password
      // })
      // .then(resp =>{
      //   if (resp.data.code === 0) {
      //       console.log(resp.data.user)
      //       this.$router.replace('/home')
      //     } else {
      //       console.log(resp.data.msg)
      //     }
      //   })
      //   .catch(failResponse => { })
    }
  }
}
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>